<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王瑞博客</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <audio src="./music/想去海边.mp3" preload="auto" controls="controls" loop autoplay  id="mymusic"></audio>
    <div id="color">
        <div class="color-title">更改主题颜色</div>
        <span class="color1"></span>
        <span class="color2"></span>
        <span class="color3"></span>
    </div>
    <div class="container-main">
        <div class="banner">
            <h3>王瑞博客</h3>
            <div class="nav">
                <div class="touxiang">  
                    <img src="./img/touxiang.jpg" draggable="false">    
                </div>
                <ul>
                    <li>
                        <a href="javascript:;" draggable="false" id="home">首页</a>
                    </li>
                    <li>
                        <a href="javascript:;" draggable="false" id="introduce">介绍</a>
                    </li>
                    <li>
                        <a href="javascript:;" draggable="false" id="works">作品</a>
                    </li>
                    <li>
                        <a href="javascript:;" draggable="false" id="photos">相册</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="main-body clearfix">
            <div class="left">
                <div class="n1">
                    <div class="tou"></div>
                    <div class="bk">
                        <h3>个人博客，属于我的小世界！</h3>
                        <p>
                            本文不是很长，记录了我博客制作到现在的过程，还有我到现在的一个
                            状态，感谢您的阅读，如果你还是学生，也许你能找到我们相似的地方，如果
                            你已经工作，有自己的博客，我想，你并没有忘记当初建立个人博客的初衷吧！
                            大约一是练习自己的布局，二是练习自己的原生JS能力，三是很想拥有一个自己
                            建立的只属于自己的页面，记录一些东西，发表一些感慨，学习和进步。
                        </p>
                        <img src="./img/t1.jpg" draggable="false">
                        <img src="./img/t2.jpg" draggable="false">
                        <img src="./img/t3.jpg" draggable="false">
                        <img src="./img/t4.jpg" draggable="false">
                        <img src="./img/t5.jpg" draggable="false">
                        <ul>
                            <li><a href="#">[随笔日记]</a></li>
                            <li><a href="#">2021-01-08</a></li>
                            <li><a href="#">阅读(90)</a></li>
                            <li><a href="#">喜欢(90)</a></li>
                        </ul>
                    </div>
                </div>
                <div class="c1"></div>
                <div class="n2">
                    <h3>AJAX请求的五个步骤</h3>
                    <p>1. 创建一个XMLHttpRequest异步对象</p>
                    <p>2. 设置请求方式和请求地址</p>
                    <p>3. 用send发送请求</p>  
                    <p>4. 监听状态变化</p>   
                    <p>5. 接收返回的数据</p>
                    <ul>
                        <li><a href="#">[随笔日记]</a></li>
                        <li><a href="#">2021-01-08</a></li>
                        <li><a href="#">阅读(90)</a></li>
                        <li><a href="#">喜欢(90)</a></li>
                    </ul>
                </div>
                <div class="c2"></div>
                <div class="n3">
                    <h3>主流开源协议之间有何异同?</h3>
                    <p>
                        为什么要添加开源协议?<br>首先是对作者的保护，防止知识成果被恶意利用。开源协议中一般都包含免责声明(禁止代码的作者承担代码使用后的风险及产生的后果)<br>如何选择合适的开源协议?<br>
                        虽然开源协议种类众多，但最常用的也就几种而已，使用率比较高的三种协议就是下面图中所示
                    </p>
                    <img src="./img/t6.jpg" draggable="false">
                    <ul>
                        <li><a href="#">[随笔日记]</a></li>
                        <li><a href="#">2021-01-08</a></li>
                        <li><a href="#">阅读(90)</a></li>
                        <li><a href="#">喜欢(90)</a></li>
                    </ul>
                </div>         
            </div>
            <div class="left2">
                <div class="me">
                    <img src="./img/me.jpg" class="me">
                    <p>
                        我的个签：人生没有彩排，每天都是现场直播。
                    </p>
                </div>
                <div class="wrapper">
                    <ul class="tab">
                        <li class="tab-item active">个人资料</li>
                        <li class="tab-item">其他资料</li>
                    </ul>
                    <div class="products">
                        <div class="main selected">
                            <p>姓名：<span>王瑞</span></p>
                            <p>性别：<span>男</span></p>
                            <p>年龄：<span>24</span></p>
                            <p>学校名称：<span>黑龙江工商学院</span></p>
                            <p>学历：<span>本科</span></p>
                            <p>生日：<span>三月初四（农历）</span></p>
                            <p>星座：<span>金牛座</span></p>
                            <p>职业：<span>学生</span></p>
                            <p>现居地：<span>中国 辽宁 大连</span></p>
                            <p>婚姻状态：<span>未婚</span></p>
                            <p>血型：<span>O</span></p>
                            <p>故乡：<span>中国 黑龙江 绥棱</span></p>
                        </div>
                        <div class="main">
                            <p>想从事的工作：<span>WEB前端</span></p>
                            <p>手机号：<span>13763737489</span></p>
                            <p>QQ号：<span>1020715368</span></p>
                            <p>QQ邮箱：<span>qaz666666@vip.qq.com</span></p>
                            <p>项目经历：</p>
                            <p>Vue商城项目</p>
                            <p>项目描述:调用后端接口实现轮播图，新闻资讯与详情，图片分享，商品列表与详情和购物车、评论等功能；</p>
                            <p>项目职责：使用Vue和Mint-UI还有MUI来完成项目，通过Vuex传值功能给购物车传递数据，使用Vue-resource获取数据；</p>
                            <p>Git地址：<a href="https://gitee.com/wang-rui1996/vue110" target="_black">https://gitee.com/wang-rui1996/vue110</a></p>
                            <p>静态页练习</p>
                            <p>项目描述： 喜欢仿站，课余时间练习CSS，仿过天猫首页的静态页，用Bootstrap框架仿过星巴克的静态页等等。</p>
                            <p>天猫Git地址：<a href="http://wang-rui1996.gitee.io/tianmao" target="_black">http://wang-rui1996.gitee.io/tianmao</a></p>
                            <p>星巴克Git地址：<a href="http://wang-rui1996.gitee.io/xingbake" target="_black">http://wang-rui1996.gitee.io/xingbake</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="left3">
                <div class="works">
                    <h3>个人作品集</h3>
                    <a class="work" href="http://wang-rui1996.gitee.io/tianmao" target="_black">
                        <img src="./img/tianmao.jpg" alt="">
                        <div class="work-title">
                            <span>仿天猫静态页</span>
                        </div>
                    </a>
                    <a class="work" href="http://wang-rui1996.gitee.io/xingbake" target="_black">
                        <img src="./img/xingbake.jpg" alt="">
                        <div class="work-title">
                            <span>用Bootstrap仿做星巴克静态页</span>
                        </div>
                    </a>
                    <a class="work" href="http://wang-rui1996.gitee.io/fullpage" target="_black">
                        <img src="./img/fullpage.jpg" alt="">
                        <div class="work-title">
                            <span>fullpage练习</span>
                        </div>
                    </a>
                    <a class="work" href="http://wang-rui1996.gitee.io/whirligig" target="_black">
                        <img src="./img/xiangce.jpg" alt="">
                        <div class="work-title">
                            <span>旋转木马相册</span>
                        </div>
                    </a>
                    <a class="work" href="https://gitee.com/wang-rui1996/vue110" target="_black">
                        <img src="./img/vueshop.jpg" alt="">
                        <div class="work-title">
                            <span>黑马程序员vue商城练习</span>
                        </div>
                    </a>
                    <a class="work" href="https://gitee.com/wang-rui1996/vuemovie" target="_black">
                        <img src="./img/vuemove.jpg" alt="">
                        <div class="work-title">
                            <span>vue电影</span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="left4">
                <div class="box">
                    <div class="inner">
                        <ul>
                            <li><img src="./img/lb1.jpg" draggable="false"></li>
                            <li><img src="./img/lb2.jpg" draggable="false"></li>
                            <li><img src="./img/lb3.jpg" draggable="false"></li>
                            <li><img src="./img/lb4.jpg" draggable="false"></li>
                            <li><img src="./img/lb5.jpg" draggable="false"></li>
                        </ul>
                        <ol class="number"></ol>
                        <div class="span_btn">
                            <span class="btn-left"> < </span>
                            <span class="btn-right"> > </span>
                        </div>
                    </div>
                </div>
                <div class="photo-list">
                    <h3>我的相册</h3>
                    <ul>
                        <li><img src="./img/p1.jpg" draggable="false"></li>
                        <li><img src="./img/p2.jpg" draggable="false"></li>
                        <li><img src="./img/p3.jpg" draggable="false"></li>
                        <li><img src="./img/p4.jpg" draggable="false"></li>
                        <li><img src="./img/p5.jpg" draggable="false"></li>
                        <li><img src="./img/p6.jpg" draggable="false"></li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <div class="xiangce">
                    <h3>我的相册</h3>
                    <div class="photos clearfix">
                        <img src="./img/p1.jpg" draggable="false">
                        <img src="./img/p2.jpg" draggable="false">
                        <img src="./img/p3.jpg" draggable="false">
                        <img src="./img/p4.jpg" draggable="false">
                        <img src="./img/p5.jpg" draggable="false">
                        <img src="./img/p6.jpg" draggable="false">
                    </div>
                </div>
                <div class="search clearfix">
                    <input type="text" class="search-inp" placeholder="请输入关键词"><button class="search-btn">搜索</button>
                </div>
                <!-- 日历 -->
                <div class="calendar">
                    <div class="title clearfix">
                      <h1 class="green" id="calendar-title">Month</h1>
                      <h2 class="green small" id="calendar-year">Year</h2>
                      <a href="" id="prev" draggable="false"><</a>
                      <a href="" id="next" draggable="false">></a>
                    </div>
                    <div class="body">
                      <div class="lightgrey body-list">
                        <ul>
                          <li>一</li>
                          <li>二</li>
                          <li>三</li>
                          <li>四</li>
                          <li>五</li>
                          <li>六</li>
                          <li>日</li>
                        </ul>
                      </div>
                      <div class="darkgrey body-list">
                        <ul id="days">
                        </ul>
                      </div>
                    </div>
                  </div>
                  <!-- 日历end -->
                <div class="newupdates">
                    <h3>最近更新</h3>
                    <ul>
                        <li><a href="#" draggable="false">个人博客，属于我的小世界！</a></li>
                        <li><a href="#" draggable="false">AJAX请求的五个步骤</a></li>
                        <li><a href="#" draggable="false">mongodb数据库从入门到精通</a></li>
                        <li><a href="#" draggable="false">Vue严格模式和普通模式之间的区别</a></li>
                        <li><a href="#" draggable="false">axios解决跨域问题</a></li>
                        <li><a href="#" draggable="false">主流开源协议之间有何异同？</a></li>
                        <li><a href="#" draggable="false">利用node.js搭建服务器</a></li>
                        <li><a href="#" draggable="false">webpack常用命令</a></li>
                    </ul>
                </div>

            </div>
        </div>

    </div>
</body>

</html>